import { createRouter, createWebHistory } from 'vue-router';
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
import axios from 'axios';
import qs from 'qs';


import Login from "@/components/login.vue"
import Register from "@/components/register.vue"
import Category from "@/components/category.vue";
import Search from "@/components/search.vue";
import MenuDisplay from "@/components/MenuDisplay.vue";


import HomePage from "@/components/HomePage.vue";
import MainLayout from "@/components/MainLayout.vue"
import OrdersPage from "@/components/OrdersPage.vue";
import ProfilePage from "@/components/ProfilePage.vue";
import AddressList from "@/components/AddressList.vue";
import OrderConfirmation from "@/components/OrderConfirmation.vue";
const routes = [
    { path: '/login', component: Login},
    { path: '/register', component: Register},
    // { path: '/home', component: Home },
    { path: '/business/category', component: Category},
    { path: '/search', component: Search},
    { path: '/business', component: MenuDisplay},
    { path: '/address-list', component: AddressList},
    // { path: '/order/history', component: OrderHistory},
    {
        path: '/',
        component: MainLayout,
        children: [
            {
                path: '',
                name: 'home',
                component: HomePage
            },
            {
                path: '/orders',
                name: 'orders',
                component: OrdersPage
            },
            {
                path: '/profile',
                name: 'profile',
                component: ProfilePage
            }
        ]
    },

    { path: '/order/confirm', component: OrderConfirmation}

];

const router = createRouter({
    history: createWebHistory(),
    routes
});



const app = createApp(App);
app.provide("$axios", axios);
app.provide("$qs", qs);
app.use(router);
app.use(ElementPlus);
app.mount('#app');





